// 1、【准备】打开网页创建【网页顶部加载进度条】进度10%；
// 2、【定时器】定义num变量默认0，每隔10ms ++ 作为【网页顶部加载进度条】进度
// 3、【判断】如果【网页顶部加载进度条】已存在直接修改【进度】无需重复创建
// 4、【判断】进度100%  也就是 【num>=100】则【1-移除DOM】【2-清除定时器】
// 5、【优化1】网页未加载完毕，暂停操作进度条
// > 类似于龟兔赛跑
// >
// > 兔子🐰进度>95%就暂停睡觉
// >
// > 乌龟🐢走到重点结束后，兔子再走
// 6、【优化2】网页右上角增加一个旋转盒模型
var num1 = 0
var over = false
var t = setInterval(function() {
    var nprogress = document.querySelector('.nprogress')
       // 优化1：
       if(num1>=95 && !over) return
       num1++

       if(nprogress) {
           nprogress.style.width = num1 + '%'
       } else {
           var nprogress = document.createElement('div')
           nprogress.className = 'nprogress'
           nprogress.style.position = 'fixed'
           nprogress.style.top = 0
           nprogress.style.width = num + '%'
           nprogress.style.height = '5px'
           nprogress.style.backgroundColor = '#29d'
           document.body.appendChild(nprogress)
       }

        // 优化2：再去搞一个圈圈
        var nprogressRadius = document.createElement('div')
        nprogressRadius.className = 'nprogressRadius'
        document.body.appendChild(nprogressRadius)

        // 后续
        if(num1>=110) {
            document.body.removeChild(nprogress)
            clearInterval(t)
            document.body.removeChild(document.querySelector('.nprogressRadius'))
        }  
},10)

// window.onload = function() {
//     over = true
// }

window.addEventListener('load',function(){
    over = true
})